<template>
	<slot></slot>
	<el-dialog v-model="showDialog" :title="getTitle" width="790px" class="attachment-dialog" :destroy-on-close="true" :z-index="3000">
		<attachment :limit="limit" :type="type" :accept="accept" :size="size" ref="attachmentRef" />
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="showDialog = false">取消</el-button>
				<el-button type="primary" @click="confirm">确认</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import attachment from './attachment.vue';

const prop = defineProps({
	limit: {
		type: Number,
		default: 1,
	},
	accept: {
		type: String,
		default: '*/*',
	},
	size: {
		type: Number,
		default: 0,
	},
	type: {
		type: String,
		default: 'image',
	},
});

const getTitle = computed(() => {
	switch (prop.type) {
		case 'image':
			return '选择图片';
		case 'video':
			return '选择视频';
		default:
			return '选择文件';
	}
});

const showDialog = ref(false);
const attachmentRef: Record<string, any> | null = ref(null);

const emit = defineEmits(['confirm']);

const confirm = () => {
	showDialog.value = false;
	const files = Object.values(attachmentRef?.value.selectedFile);
	emit('confirm', prop.limit == 1 ? files[0] ?? null : files);
};

const openDialog = () => {
	showDialog.value = true;
};

defineExpose({
	openDialog,
});
</script>

<style lang="scss" scoped>
.attachment-dialog {
	.el-upload-list {
		position: absolute;
		z-index: 5;
	}

	.el-upload-list__item {
		background: var(--el-dialog-bg-color);
		box-shadow: var(--el-dialog-box-shadow);
	}
}
</style>
<style lang="scss">
.el-overlay .el-overlay-dialog .el-dialog.attachment-dialog>.el-dialog__body {
	padding: 0 !important;
}
</style>